<template>
    <div class="editor_container" v-if="visible">
        <!-- 工具栏 -->
        <Toolbar
            class="toolbar_wrap"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <!-- 编辑器 -->
        <Editor
            class="editor_wrap"
            :style="{ height: height + 'px' }"
            :defaultConfig="editorConfig"
            v-model="html"
            @onChange="onChange"
            @onCreated="onCreated"
        />
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Boot } from '@wangeditor/editor'
import attachmentModule from '@wangeditor/plugin-upload-attachment'
import { insertBreak } from '@/views/components/wangeditor/WangeditorPlugins'
Boot.registerModule(attachmentModule)

import { baseApi } from '@/config'
import { getToken } from "@/libs/auth";
export default {
    name: 'Wangeditor',
    components: { Editor, Toolbar },
    props: {
        mode: {
            type: String,
            default: 'default'
        },
        htmlVal: {
            type: String,
            default: null
        },
        height: {
            type: [String, Number],
            default: 300,
        },
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            editor: null,
            html: null,

            toolbarConfig: {
                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                // excludeKeys: [ /* 隐藏哪些菜单 */ ]
                insertKeys: {
                    index: 0, // 自定义插入的位置
                    keys: ['uploadAttachment'], // “上传附件”菜单
                },
            },

            editorConfig: {
                placeholder: '请输入内容...',
                autoFocus: false,
                uploadImgMaxSize: 100 * 1024 * 1024, // 2M
                hoverbarKeys: {
                    attachment: {
                        menuKeys: ['downloadAttachment'], // “下载附件”菜单
                    },
                },
                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
                    lineHeight: {
                        lineHeightList: ['0', '0.5', '1', '1.5', '2', '2.5']
                    },
                    uploadImage: {
                        server: baseApi+"/system/file/upload",
                        headers: { token: getToken() },
                        withCredentials: true,
                        // 文件上传成功之后
                        customInsert: this.customImageInsertFn
                    },
                    uploadVideo: {
                        server: baseApi+"/system/file/upload",
                        headers: { token: getToken() },
                        withCredentials: true,
                        // 文件上传成功之后
                        customInsert: this.customVideoInsertFn
                    },
                    uploadAttachment: {
                        server: baseApi+"/system/file/upload",
                        headers: { token: getToken() },
                        withCredentials: true,
                        // 文件上传成功之后
                        customInsert: this.customAttachmentInsertFn
                    }
                }
            }
        }
    },

    watch: {
        // 监听父组件填充的值，将值填充到子组件的编辑器里
        htmlVal(val) {
            this.$nextTick(() => {
                if(undefined == val || null == val) {
                    this.html = ''
                } else {
                    this.html = val
                }
            })
        }
    },

    created() {

    },

    mounted() {
        this.$nextTick(() => {
        })
    },

    methods: {
        /**
         * 编辑器创建完毕时的回调函数
         * 【注意】一定要用 Object.seal() 否则会报错
         * @param {*} editor
         */
        onCreated(editor) {
            // 注册插件
            Boot.registerModule(insertBreak(editor))
            this.editor = Object.seal(editor)
        },

        /**
         * 编辑器内容、选区变化时的回调函数
         * @param {*} editor
         */
        onChange(editor) {
            this.$emit('update:htmlVal', editor.getHtml())
        },

        /**
         * 上传图片到服务器，返回的结果
         * @param {*} res
         * @param {*} insertFn
         */
         customImageInsertFn(res, insertFn) {
            insertFn(res.data.href, res.data.name, res.data.href)
        },

        /**
         * 上传视频到服务器，返回的结果
         * @param {*} res
         * @param {*} insertFn
         */
        customVideoInsertFn(res, insertFn) {
            insertFn(res.data.href)
        },

        /**
         * 上传视频到服务器，返回的结果
         * @param {*} res
         * @param {*} insertFn
         */
        customAttachmentInsertFn(res, file, insertFn) {
            insertFn(file.name, res.data.href)
        },

        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
        },

        // 父组件窗口关闭时调用该方法清空内容
        clearVal() {
            this.html = ''
        }
    }

}
</script>
<style lang="scss">
.editor_container{
    .w-e-text-container{
        .w-e-text-placeholder{
            font-style: normal;
            left: 10px;
            top: 6px;
        }
    }
}
</style>
<style lang="scss" scoped>
.editor_container{
    border: 1px solid #ccc;
    width: 82%;
    z-index: 9999;
    .toolbar_wrap{
        border-bottom: 1px solid #ccc;
    }
    .editor_wrap{
        height: 300px;
        overflow-y: hidden;


    }
}
</style>
